<template>
  <div>
    <el-form :model="formItem" label-width="100px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="任务编号">
            {{ formItem.code }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务名称">
            {{ formItem.name }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护部门">
            {{ formItem.orgName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="执行人">
            {{ formItem.chargeUserCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否停止服务">
            {{ formItem.suspendService === true ? '是' : '否' }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护类别">
            {{ formItem.modelName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="维护规则">
            {{ formItem.ruleName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护对象">
            {{ formItem.objName }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="维护结果">
            {{ formItem.result === 'normal' ? '正常' : (formItem.result === null ? '' : '异常') }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护开始时间">
            {{ formItem.startDateTime }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护结束时间">
            {{ formItem.endDateTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="停止服务通知发送状态">
            {{ formItem.noticeSendStatus === 'send' ? '已发送' : '未发送' }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参与人">
            {{ formItem.joinUser }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话">
            {{ formItem.tel }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="20">
          <el-form-item label="结果描述">
            {{ formItem.resultDesc }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="20">
          <el-form-item label="维护过程说明">
            {{ formItem.processDesc }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="20">
          <el-form-item label="备注">
            {{ formItem.remarks }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  detail
} from '@neu/dcom-ui/api/maintainTask'
import { formatDate } from '@neu/biz-core/utils/utils'

const formItem = {
  name: '',
  code: '',
  orgCode: null,
  orgName: '',
  chargeUserId: '',
  chargeUserCode: '',
  chargeUserName: '',
  suspendService: '',
  modelCode: null,
  modelName: '',
  objCode: '',
  objName: '',
  ruleId: '',
  ruleCode: '',
  ruleName: '',
  status: 'undo',
  result: 'normal',
  startDateTime: '',
  endDateTime: '',
  noticeSendStatus: 'send',
  joinUser: '',
  tel: '',
  resultDesc: '',
  processDesc: '',
  remarks: ''
}
export default {
  name: 'TmpMaintainTaskViewForm',
  props: {
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      formItem: {
        ...formItem
      }
    }
  },
  watch: {
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
          this.formItem.startDateTime = formatDate(this.formItem.startDateTime)
          this.formItem.endDateTime = formatDate(this.formItem.endDateTime)
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    }
  }
}
</script>
